<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>添加删除记录</title>
		<link rel="stylesheet" type="text/css" href="css/24.css" />
		<script type="text/javascript">
			
			//删除tr的响应函数即点击超链接删除对应行
			function delA() {
							//点击超链接后删除所在行
							//获取tr元素节点
							var tr=this.parentNode.parentNode;
							
							//获取要删除的名字
							var name=tr.getElementsByTagName("td")[0].innerHTML;
							
							//删除前弹出一个提示框确认是否删除
							var con=confirm("确认删除"+name+"的信息吗？");
							
								//判断点击按钮
								if(con){
									//删除tr
									tr.parentNode.removeChild(tr);
								}
							
							//取消超链接的默认跳转
							return false;
						};
			window.onload=function(){
				
				//一、点击超链接后删除员工信息
				
					//1、获取所有超链接
					var allA=document.getElementsByTagName("a");
					
					//2、为每个超链接绑定事件（响应函数）
					//遍历获取的超链接
					for (var i = 0; i < allA.length; i++) {
						
						//3、单击事件
						allA[i].onclick=delA;

					}
				
				//二、添加员工信息到表格中
				
					//1、为提交按钮绑定单击事件
					//获取提交按钮
					var addEmpButton=document.getElementById("addEmpButton");
					
					//绑定单击事件		
					addEmpButton.onclick=function(){
						
						//获取添加的员工信息
						
						//获取员工的name
						var name=document.getElementById("empName").value;
							
						//获取员工的email、salary
						var email=document.getElementById("email").value;
						var salary=document.getElementById("salary").value;
						//alert(name+","+email+","+salary);
						
						//以标签名创建tr
						var tr=document.createElement("tr");
						
						//设置tr中的内容
						tr.innerHTML= "<td>"+name+"</td>"+
									  "<td>"+email+"</td>"+
									  "<td>"+salary+"</td>"+
									  "<td><a href='javascript:;'>Delete</a></td>";
									  
						//获取超链接
						var a=tr.getElementsByTagName("a")[0];
						a.onclick=delA;
						
						//获取table
						var employeeTable=document.getElementById("employeeTable");
					
						//获取employeeTable中的tbody
						tbody=employeeTable.getElementsByTagName("tbody")[0];
						//将tr添加到tbody中
						tbody.appendChild(tr);
					
						
					};
				
				
				
				
				
				
			}
			
		</script>
	</head>
	<body>
		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>	
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@qq.com</td>
				<td>5000</td>
				<td><a href="24TOM.html">Delete</a></td>				
			</tr>
			<tr>
				<td>Jerry</td>
				<td>Jerry@qq.com</td>
				<td>8000</td>
				<td><a href="24Jerry.html">Delete</a></td>				
			</tr>	
			<tr>
				<td>Bob</td>
				<td>Bob@qq.com</td>
				<td>6000</td>
				<td><a href="24Bob.html">Delete</a></td>				
			</tr>
		</table>
		
		<div id="formDiv">
			
			<h4>添加新员工</h4>
			
			<table>
				<tr>
					<td class="word">name:</td>
					<td class="inp">
						<input type="text" name="empName" id="empName" />						
					</td>	
				</tr>
				<tr>
					<td class="word">email:</td>
					<td class="inp">
						<input type="text" name="email" id="email" />						
					</td>	
				</tr>
				<tr>
					<td class="word">salary:</td>
					<td class="inp">
						<input type="text" name="salary" id="salary" />						
					</td>	
				</tr>
				<tr>					
					<td colspan="2" align="center">
						<button id="addEmpButton" >	
							Submit
						</button>
					</td>	
				</tr>
			</table>
			
		</div>
		
	</body>
</html>
